<!DOCTYPE html><html lang=ch><head><meta charset=UTF-8><meta name=viewport content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name=keywords content=image-set><meta name=description content=image-set><meta name=robots content=image-set><meta name=author content=songyuanlu><meta content=yes name=apple-mobile-web-app-capable><meta content=black name=apple-mobile-web-app-status-bar-style><title>image-set</title><link rel=stylesheet href=../../css/public/public.css><style type=text/css>#logo {
		display: block;
	    width: 132px;
	    height: 43px;
	    background-image:  url(../../images/css/qqlogo.png);
	    background-repeat: no-repeat;
	    margin-top: 10px;
	}
	@media screen{
		#logo {
		    width: 1.34rem;
		    height: 0.44rem;
		    background-image: url(../../images/css/qqlogo_1x.png);
		    background-image: -webkit-image-set(url(../../images/css/qqlogo_1x.png) 1x,url(../../images/css/qqlogo_2x.png) 2x);
		}
	}</style><body><nav class=nav id=nav></nav><article class="page page-detail"><h1 class=article-h1>image-set 响应式图片</h1><p>根据不同分辨率选择不同图片，可用媒体查询<span class=txt-mark>@media</span>，一种更好的方法<span class=txt-mark>image-set</span></p><p>例：</p><p>image-set:<br><a href=javascript:; id=logo></a></p><p>img srcset:<br><img src=../../images/css/qqlogo.png srcset="../../images/css/qqlogo_1x.png, ../../images/css/qqlogo_2x.png 2x"></p><p>img srcset w:<br><img src=../../images/css/img.png srcset="../../images/css/img_1x.png 320w, ../../images/css/img_2x.png 640w, ../../images/css/img.png 1024w" sizes="(max-width: 320px) 100vw, (max-width: 640px) 200vw, 254px"></p></article><script src=../../lib/js/zepto.js></script><script src=../../js/public.js></script>